

export function Openscreen(imglist,id){//构造函数
    this.list = imglist;
    this.id = id;
}
Openscreen.prototype.init = function(){
    var body = document.querySelector("body");
    var openscreen = document.querySelector(".openscreen");
    if(openscreen!=null){
        openscreen.remove();
    }
    var div = document.createElement("div");
    div.className = "openscreen";
    var closebtn = document.createElement("div");
    closebtn.className = "closescreen"
    closebtn.innerText = "X"
    closebtn.onclick = function(){
        var openscreen = document.querySelector(".openscreen");
        if(openscreen!=null){
            openscreen.remove();
        }
    }
    var to_left = document.createElement("div");
    to_left.className = "screen_direction screen_toleft";
    to_left.innerText = "<<";
    div.appendChild(to_left);

    var to_right = document.createElement("div");
    to_right.className = "screen_direction screen_toright";
    to_right.innerText = ">>";
    div.appendChild(to_right);
    div.appendChild(closebtn)

    var imgul = document.createElement('ul');
    imgul.className = 'imglistul';
    this.list.forEach((item)=>{
        var li = document.createElement('li');
        li.innerHTML = `<img src = ${item.img}>`;
        imgul.appendChild(li)
    })
    div.appendChild(imgul)
    body.appendChild(div);
    bannereffect(this.id-1);
}
function bannereffect(index){
    var openscreen = document.querySelector(".openscreen");
    var openscreen_width = openscreen.offsetWidth;
    var ul = document.querySelector(".imglistul");
    var lis = document.querySelectorAll("li");
    ul.style.width = openscreen_width*lis.length +'px'
    for(var i = 0;i<lis.length;i++){
        var myli = lis[i];
        myli.style.width = openscreen_width+"px";
    }
    ul.style.left = -index*openscreen_width+'px';
    var to_left = document.querySelector(".screen_toleft");
    var to_right = document.querySelector(".screen_toright");
    ul.style.transition = "left 0.8s ease";
    to_left.onclick = function(){
        index--
        if(index < 0){
            alert("当前为第一张");
            return;
        }else{
            ul.style.left = -index*openscreen_width+'px';
        }
    }
    to_right.onclick = function(){
        index++
        if(index > lis.length-1){
            alert("当前最后一张");
            return;
        }else{
            ul.style.left = -index*openscreen_width+'px';
        }
    }
    var startX,moveX,distanceX;
    ul.addEventListener('touchstart',function(e){
        ul.style.transition = null;
        startX = e.targetTouches[0].clientX;
    })
    ul.addEventListener('touchmove',function(e){
        moveX = e.targetTouches[0].clientX;
        distanceX = moveX-startX;
        // console.log(distanceX);
        ul.style.left  = (-index*openscreen_width + distanceX) +"px";
    })
    ul.addEventListener('touchend',function(e){
        if(Math.abs(distanceX) > 100){
            if(distanceX > 0){//左滑
                index--;
            }else if(distanceX < 0){//右滑
                index++;
            }
            if(index>=0 && index<=lis.length-1){
                ul.style.transition = "left 0.8s ease";
                ul.style.left = -index*openscreen_width +"px";
            }else if(index > lis.length-1){
                index =lis.length-1;
                ul.style.transition = "left 0.8s ease";
                ul.style.left = -(lis.length-1)*openscreen_width +"px";
            }else if(index < 0){
                index = 0;
                ul.style.transition = "left 0.8s ease";
                ul.style.left = -(0)*openscreen_width +"px";
            }
        }else if(Math.abs(distanceX) > 0){
            ul.style.transition = "left 0.8s ease";
            ul.style.left = -index*openscreen_width +"px";
        }
        startX = 0;
        moveX = 0;
        distanceX = 0;
    })
}